<template>
  <div class="station-1-card">
    <div class="card-header">
      <h3 class="card-title">1号工位：托盘进站-尺寸测量</h3>
      <div class="card-status">
        <span class="status-tag" :class="getStatusClass(station1Data.status)">{{ getStatusText(station1Data.status) }}</span>
        <!-- <span class="update-time">更新于: {{ station1Data.updateTime }}</span> -->
      </div>
    </div>
    
    <div class="card-content">
      <!-- 基础信息行 -->
      <div class="basic-info">
        <div class="info-item">
          <span class="info-label">当前位置：</span>
          <span class="info-value">{{ '尺寸测量位' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">任务编号：</span>
          <span class="info-value">{{ station1Data.taskNo || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">面单号：</span>
          <span class="info-value">{{ station1Data.waybillNo || '-' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">容器编号：</span>
          <span class="info-value">{{ station1Data.containerNo || '-' }}</span>
        </div>
      </div>
      
      <!-- 测量数据行（水平排列） -->
      <div class="measure-data-horizontal">
        <div class="data-section">
          <h4 class="section-title">尺寸测量数据</h4>
          <div class="data-grid">
            <div class="data-item">
              <span class="data-label">长度</span>
              <span class="data-value">{{ station1Data.measureLength || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">宽度</span>
              <span class="data-value">{{ station1Data.measureWidth || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">高度</span>
              <span class="data-value">{{ station1Data.measureHeight || 0 }} mm</span>
            </div>
          </div>
        </div>
        
        <div class="data-section">
          <h4 class="section-title">包装规格数据</h4>
          <div class="data-grid">
            <div class="data-item">
              <span class="data-label">长度</span>
              <span class="data-value">{{ station1Data.cartonLength || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">宽度</span>
              <span class="data-value">{{ station1Data.cartonWidth || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">高度</span>
              <span class="data-value">{{ station1Data.cartonHeight || 0 }} mm</span>
            </div>
          </div>
        </div>
        
        <div class="data-section">
          <h4 class="section-title">材料使用数据</h4>
          <div class="data-grid">
            <div class="data-item">
              <span class="data-label">出纸宽度</span>
              <span class="data-value">{{ station1Data.typeWidth || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">选择宽度</span>
              <span class="data-value">{{ station1Data.usageWidth || 0 }} mm</span>
            </div>
            <div class="data-item">
              <span class="data-label">出纸长度</span>
              <span class="data-value">{{ station1Data.outputLength || 0 }} mm</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';

// 接收父组件传递的1号工位数据
const props = defineProps({
  stationData: {
    type: Object,
    required: false,
    default: () => ({})
  }
});

// 1号工位数据（单独处理）
const station1Data = ref({});

// 测试数据（当父组件未提供数据时使用）
const testStation1Data = {
  id: '1',
  name: '托盘进站-尺寸测量',
  location: '尺寸测量位',
  status: 2, // 运行中
  taskId: 'T250822001',
  waybillNo: 'WB87654321',
  containerNo: 'CT1001',
  operateTime: '09:35:22',
  measureLength: 450,
  measureWidth: 320,
  measureHeight: 280,
  packLength: 480,
  packWidth: 350,
  packHeight: 300,
  paperOutWidth: 500,
  paperUseWidth: 490,
  paperOutLength: 600,
  updateTime: ''
};

// 格式化时间
const formatTime = (date) => {
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
};

// 处理1号工位数据
const processStation1Data = (data) => {
  station1Data.value = {
    ...data,
    updateTime: formatTime(new Date())
  };

};

// 监听父组件数据更新
watch(
  () => props.stationData,
  (newData) => {
    //console.log(newData)
    const dataToUse = Object.keys(newData).length > 0 ? newData : testStation1Data;
    processStation1Data(dataToUse);
  },
  { immediate: true, deep: true }
);

// 初始化数据
onMounted(() => {
  if (Object.keys(props.stationData).length === 0) {
    processStation1Data(testStation1Data);
  }
});

// 状态文本映射
const getStatusText = (status) => {
  const statusMap = {
    0: '未运行',
    1: 'OK',
    2: 'NG',
    3: '异常'
  };
  return statusMap[status] || '未知';
};

// 状态样式映射
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
   // 1: 'status-running',
    1: 'status-completed',
    2: 'status-error'
  };
  return classMap[status] || 'status-pending';
};
</script>

<style scoped>
/* 1号工位卡片样式 */
.station-1-card {
  background: linear-gradient(145deg, rgb(12, 42, 95), rgb(8, 34, 82));
  border: 1px solid rgba(95, 158, 255, 0.3);
  border-radius: 0.6vw;
  box-sizing: border-box;
  box-shadow: 0 0.3vw 1vw rgba(0, 10, 30, 0.5);
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(95, 158, 255, 0.2);
}

.card-title {
  font-size: clamp(16px,1.1vw,18px);
  font-weight: 600;
  color: #8ec5fc;
  margin: 0;
}

.card-status {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.update-time {
  font-size: 0.8vw;
  color: #b0c4de;
}

/* 1号工位内容区 */
.card-content {
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
   padding: 0px 12px 12px;
  box-sizing: border-box;
}

/* 基础信息 */
.basic-info {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2vw;
}

.info-item {
  flex: 0 0 auto;
  min-width: 140px;
}

.info-label {
  font-size: 0.8vw;
  color: #b0c4de;
  margin-right: 0.3vw;
}

.info-value {
  font-size: 14px;
  color: #e0f0ff;
  font-weight: 500;
}

/* 测量数据 - 水平排列 */
.measure-data-horizontal {
  flex: 1;
  display: flex;
  gap: 0.8vw;
  padding-bottom: 0.3vw;
}

.data-section {
  flex: 1;
  min-width: 200px;
  background: rgba(10, 36, 85, 0.5);
  border-radius: 0.4vw;
  padding: 0.6vw;
  box-sizing: border-box;
}

.section-title {
  font-size: 14px;
  color: #8ec5fc;
  margin: 0 0 0.6vw 0;
  padding-bottom: 0.3vw;
  border-bottom: 1px solid rgba(95, 158, 255, 0.2);
}

.data-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  height: calc(100% - 25px);
}

.data-item {
  display: flex;
  justify-content:flex-start;
  align-items: center;
  padding: 0.4vw;
  background: rgba(15, 45, 100, 0.3);
  border-radius: 0.3vw;
  flex: 1;
  gap: 16px;
  padding-left: 35px;
}

.data-label {
  font-size: 14px;
  color: #b0c4de;
}

.data-value {
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 0.2vw 0.5vw;
  border-radius: 0.2vw;
  font-size: 0.75vw;
  font-weight: 500;
}

.status-pending {
  background: rgba(100, 149, 237, 0.2);
  color: #b0c4de;
}

.status-running {
  background: rgba(255, 215, 0, 0.2);
  color: #fffacd;
}

.status-completed {
  background: rgba(50, 205, 50, 0.2);
  color: #98fb98;
}

.status-error {
  background: rgba(255, 99, 71, 0.2);
  color: #ffccd5;
}

/* 响应式调整 */
@media (max-width: 1600px) {
  .info-item {
    min-width: 120px;
  }
  
  .data-section {
    min-width: 160px;
  }
}
</style>